; (function () {
  //渲染购物车页面
  function render(data) {
    if (data.length == 0) {
      document.querySelector(".shop_con_body").innerHTML = `
      <div class="nogood">
            <img src="http://megasu.gitee.io/rabbit-vue3-ts/assets/none.5c042de4.png" alt="">
            <p>购物车内暂时没有商品</p>
            <div class="nogood_btn">
              继续逛逛
            </div>
          </div>`
      return
    }
    document.querySelector(".shop_con_body").innerHTML = data.map((item, ind) =>
      `<div class="shop_item" data-index='${ind}'>
          <div class="checkbox">
            <i class="icon toutiao  ${item.isSel ? 'icon-duoxuanxuanzhong_o' : ''
      }
            icon-duoxuanweixuanzhong_o "></i>
          </div>
          <div class="goods">
            <dl>
              <dt>
                <img src="${item.picture}" alt="">
              </dt>
              <dd>
                <p>${item.desc}</p>
                <p>${item.style}</p>
              </dd>
            </dl>
          </div>
          <div class="price">
            <span>¥${item.price}</span>
          </div>
          <div class="num1">
            <div class="numbox">
              <a href="#" class="sub">-</a>
              <input type="text" value='${item.number}'>
              <a href="#" class="add">+</a>
            </div>
          </div>
          <div class="total">
            <span>¥${item.number * item.price}</span>
          </div>
          <div class="ope">
            <p><a href="#">移入收藏夹</a></p>
            <p class="del"><a class='dela' href="#">删除</a></p>
            <p><a href="#">找相似</a></p>
          </div>
    </div>`
    )
      .join('')

    //全选于每个选项的关联
    cAll()
  }
  let shopCarList = JSON.parse(localStorage.getItem('shopCarList')) || []
  render(shopCarList)

  //给页面中的按钮绑定点击事件
  document.querySelector('.shop_content').addEventListener('click', (e) => {
    e.preventDefault()
    let tar = e.target
    if (tar.classList.contains('icon') && !tar.classList.contains('cAll')) {
      //点击的是复选框并且不是全选
      tar.classList.toggle('icon-duoxuanxuanzhong_o')
      let ind = tar.parentNode.parentNode.dataset.index
      if (tar.classList.contains('icon-duoxuanxuanzhong_o')) {
        //点完后是选中的
        shopCarList[ind].isSel = true
      } else {
        shopCarList[ind].isSel = false
      }
    }
    if (tar.classList.contains('cAll')) {
      //点击的是全选
      tar.classList.toggle('icon-duoxuanxuanzhong_o')
      //判断全选是否选中
      let flag = tar.classList.contains('icon-duoxuanxuanzhong_o')
      //操作数据
      shopCarList.forEach((item) => {
        item.isSel = flag
      })
        //操作选中
        ;[...document.querySelectorAll('.checkbox i')].forEach(item => {
          if (flag) {
            item.classList.add('icon-duoxuanxuanzhong_o')
          } else {
            item.classList.remove('icon-duoxuanxuanzhong_o')
          }
        })

    }
    if (tar.classList.contains('add')) {//点击的是加号
      //获取下标
      let ind = tar.parentNode.parentNode.parentNode.dataset.index
      //修改对应的数据的count
      shopCarList[ind].number++
      console.log(shopCarList)

    }
    if (tar.classList.contains('sub')) {
      //点击的是加号
      //获取下标
      let ind = tar.parentNode.parentNode.parentNode.dataset.index
      //修改对应的数据的count
      shopCarList[ind].number--
      if (shopCarList[ind].number < 0) shopCarList[ind].number = 0
    }
    if (tar.classList.contains('dela')) {
      //找到点击的删除所在行的下标
      let ind = tar.parentNode.parentNode.parentNode.dataset.index
      //从数据 中删除
      shopCarList.splice(ind, 1)
      //调用弹框
      new Dialog({
        bgColor: 'rgb(240, 249, 235)',
        text: '删除成功',
        color: 'rgb(103, 184, 58)',
        borderColor: 'rgb(225, 243, 216)',
      })

    }
    //重新渲染
    render(shopCarList)
    //调用总数总计
    totalSum()
  })

  //给下单绑定点击事件
  document.querySelector('.order').addEventListener('click', () => {
    console.log(111)
    localStorage.setItem('shopCarList', JSON.stringify(shopCarList))
    location.href = '../html/fillOrder.html'
  })

  //全选和每一个选项的联动
  function cAll() {
    //全选的状态
    // 比较i的个数和选中的i的个数
    let num1 = document.querySelectorAll('.checkbox i').length
    let num2 = document.querySelectorAll(
      '.checkbox .icon-duoxuanxuanzhong_o'
    ).length
    let flag = num1 === num2
    //flag成立 添加选中类
    if (flag) {
      document
        .querySelector('.checkAll i')
        .classList.add('icon-duoxuanxuanzhong_o')
    } else {
      document
        .querySelector('.checkAll i')
        .classList.remove('icon-duoxuanxuanzhong_o')
    }
  }

  function totalSum() {
    let obj = shopCarList.reduce((prev, next) => {
      if (next.isSel) {
        prev.sel += +next.number
        prev.heji += +next.price * +next.number
      }
      prev.youxiao += +next.number
      return prev

    }, { youxiao: 0, sel: 0, heji: 0 })
    document.querySelector(
      '.count'
    ).innerHTML = `共${obj.youxiao}件有效商品,已选择${obj.sel}件`
    document.querySelector('.sum').innerHTML = `商品合计: <i>￥${obj.heji}</i>`
  }
  totalSum()

})()
